<template>
    <!-- 有子菜单时渲染 el-sub-menu -->
    <el-sub-menu v-if="item.children || item.group"  :index="item.id">
        <template #title>
            <el-icon v-if="item.icon" size="1.5em"><component :is="item.icon"/></el-icon>
            <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group v-for="(group,groupIndex) in item.group" :key="groupIndex">
            <template #title>{{ group.name }}</template>
            <!-- 递归调用自身 -->
            <menu-item
                v-for="(child,index) in group.children"
                :key="child.id || index"
                :item="child"
            />
        </el-menu-item-group>
        <!-- 递归调用自身 -->
        <menu-item
            v-for="(child,index) in item.children"
            :key="child.id || index"
            :item="child"
        />
    </el-sub-menu>
    <!-- 无子菜单时渲染 el-menu-item -->
    <el-menu-item v-if="!item.children && !item.group"  :index="item.id">
        <el-icon v-if="item.icon" size="1.5em"><component :is="item.icon"/></el-icon>
        <span>{{ item.name }}</span>
    </el-menu-item>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true
  }
})
</script>